<template>
	<view class="cell">
		<view @click="toPage(item)" v-for="item in list" :key="item.id" class="cell-banner">
			<view class="cell-banner-left">
				{{item.typeName}}
			</view>
			<view class="cell-banner-right">
				<view class="cell-banner-btn" :style="{backgroundColor:`${item.color}`}">
					{{item.title}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			console.log(options);

		},
		props: {
			list: {
				type: Array,
				default: () => []
			},
			obj: {
				type: Object,
				default: () => {}
			}

		},
		data() {
			return {

			}
		},
		created() {
		},
		methods: {
			toPage(item) {
				console.log(item);

        this.navTo(item.url, {
          id: item.id,
          title: item.typeName
        });

			}
		}
	}
</script>

<style lang="scss">
	.cell {

		.cell-banner {
			display: flex;
			color: #333333;

			view {
				padding: 20rpx;
				height: 90rpx;
				line-height: 90rpx;
				border-bottom: 1rpx solid #e9e9e9;
			}

			.cell-banner-left {
				flex: 1;
				color: #333;
			}

			.cell-banner-right {
				flex: 0.5;
				color: #fff;

				display: flex;
				flex-direction: column;
				align-items: center;

				.cell-banner-btn {
					margin: auto;
					text-align: center;
					width: 200rpx;
					height: 30rpx;
					line-height: 30rpx;
					background-color: #0a7cfc;
					border-radius: 46rpx;
					font-size: 26rpx;
				}
			}
		}

	}
</style>
